<!DOCTYPE html>

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/lib/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    
    <style>
	    .clearfix1:after {
		  content: '\20';
		  display: block;
		  height: 0;
		  clear: both;
		}
		.clearfix1 {
		  *zoom: 1;
		}
		
		.clearfix2:before,
		.clearfix2:after {
		  display: table;
		  content: " ";
		}
		.clearfix2:after {
		  clear: both;
		}
		
    	#main {
    		width: 1200px;
    		margin: 0 auto;
    		background: green;
    	}
    	.container {
    		width: 900px;
    		margin: 0 auto;
    		background: #bbb;
    	}
    	.col1 {
    		width: 300px;
    		height: 400px;
    		float: left;
    		background: #693;
    	}
    	.col2 {
    		overflow: hidden;
    		height: 100%;
    		background: #69d;
    	}
    </style>
  </head>
  <body>
  	<div id="main">
	  	<div class="container clearfix2">
	  		<div class="col1"></div>
	  		<div class="col2"></div>
		</div>
  	</div>
  	
    <script src="../js/lib/jquery/jquery-1.11.1.js"></script>
  </body>
</html>